<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.status" style="width: 200px" class="filter-item" placeholder="请选择评论状态">
        <el-option v-for="(key,index) in statuses" :key="index" :label="key.name" :value="key.id" />
        <el-option :label="'全部'" :value="''" />
      </el-select>
      <el-input v-model="listQuery.orderNo" clearable style="width: 200px" class="filter-item" placeholder="订单号"/>
      <el-input v-model="listQuery.nickName" clearable style="width: 200px" class="filter-item" placeholder="用户昵称"/>
      <el-input v-model="listQuery.content" clearable style="width: 200px" class="filter-item" placeholder="评论内容"/>
      <el-button v-permission="['message:comment:query']" clearable class="filter-item" type="primary" icon="el-icon-search" @click="search">查找</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中..." border fit highlight-current-row>
      <el-table-column align="center" label="详情" width="50" type="expand">
        <template slot-scope="scope">
          <div class="margin-bottom-10">相关产品:</div>
          <el-table v-loading="listLoading" :data="scope.row.skuNames" border>
            <el-table-column align="center" label="产品图片">
              <template slot-scope="scope">
                <el-image :src="scope.row.url+'_60_60'" fit="fit" style="width: 60px; height: 60px"/>
              </template>
            </el-table-column>
            <el-table-column align="center" label="产品名称" prop="productName" />
            <el-table-column align="center" label="产品规格" prop="skuName" />
          </el-table>
          <div class="margin-20"/>
          <div class="margin-bottom-10">回复信息:</div>
          <el-table v-loading="listLoading" :data="scope.row.children" border>
            <el-table-column align="center" label="回复内容" prop="content" />
            <el-table-column align="center" label="回复时间" prop="createDate" width="200"/>
            <el-table-column align="center" label="回复人" prop="nickName" width="100"/>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column align="center" label="内容" prop="content"/>
      <el-table-column align="center" label="星级" prop="score" width="150">
        <template slot-scope="scope">
          <el-rate v-model="scope.row.score" disabled show-score text-color="#ff9900"/>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单号" prop="orderNo" width="200"/>
      <el-table-column align="center" label="用户昵称" prop="nickName" width="100"/>
      <el-table-column align="center" label="评论时间" prop="createDate" width="150"/>
      <el-table-column align="center" label="评论状态" width="200">
        <template slot-scope="scope">
          <el-switch v-permission="['comment:verify']" v-if="scope.row.status!=1" v-model="scope.row.status" :active-value="2" :inactive-value="3" active-color="#13ce66" @change="verify(scope.row.id,$event)"/>
          <div v-else>{{ scope.row.statusName }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="400">
        <template slot-scope="scope">
          <el-button v-permission="['comment:verify']" v-if="scope.row.status===1" type="success" size="mini" @click="verify(scope.row.id,2)">审核通过</el-button>
          <el-button v-permission="['comment:verify']" v-if="scope.row.status===1" type="warning" size="mini" @click="verify(scope.row.id, 3)">审核不通过</el-button>
          <el-button v-permission="['comment:reply']" v-if="!scope.row.reply" type="primary" size="mini" @click="openReply(scope.row)">回复</el-button>
          <el-button v-permission="['comment:delete']" type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="initList"/>

    <el-dialog :visible.sync="replyDialogVisible" :close-on-click-modal="false" title="评论回复" @close="destroy">
      <el-form ref="replyForm" :rules="replyRules" :model="replyForm" label-width="80px">
        <el-form-item label="评论ID" hidden prop="parentId">
          <el-input v-model="replyForm.parentId"/>
        </el-form-item>
        <el-form-item label="回复内容" label-width="100" prop="content">
          <el-input v-model="replyForm.content" rows="5" type="textarea" placeholder="请输入要回复的内容" maxlength="300"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="replyDialogVisible = false">取 消</el-button>
        <el-button v-permission="['comment:reply']" type="primary" @click="reply">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
</style>

<script>
import { CommentService } from '@/api/MessageService'
import Pagination from '@/components/Pagination'
import Notify from '@/utils/notify'

export default {
  name: 'Order',
  components: { Pagination },
  data() {
    return {
      replyDialogVisible: false,
      replyForm: { parentId: 0, content: undefined },
      replyRules: {
        content: [{ required: true, message: '请输入要回复的内容!', trigger: 'blur' }]
      },
      statuses: [{ id: 1, name: '待审核' }, { id: 2, name: '审核通过' }, { id: 3, name: '审核未通过' }],
      list: [],
      total: 0,
      listLoading: true,
      listQuery: { pageNo: 1, pageSize: 20, status: undefined, orderNo: undefined, content: undefined, nickName: undefined }
    }
  },
  created() {
    this.initList()
  },
  methods: {
    initList() {
      this.listLoading = true
      CommentService.listComment(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.totalCount
        this.listLoading = false
      })
    },
    remove(row) {
      this.$confirm('您确认要删除该评论吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        CommentService.delComment(row.id).then(() => {
          Notify.success(this, '删除成功!')
          this.initList()
        })
      }).catch(() => {
        return false
      })
    },
    search() {
      this.listQuery.pageNo = 1
      this.initList()
    },
    verify(id, status) {
      CommentService.verifyComment(id, status).then(() => {
        this.initList()
      })
    },
    openReply(row) {
      this.replyForm.parentId = row.id
      this.replyDialogVisible = true
    },
    destroy() {
      this.replyForm.parentId = 0
      this.replyForm.content = undefined
      this.replyDialogVisible = false
    },
    reply() {
      this.$refs['replyForm'].validate(valid => {
        if (valid) {
          CommentService.replyComment(this.replyForm).then(() => {
            Notify.success(this, '回复评论成功!')
            this.initList()
            this.destroy()
          })
        }
      })
    }
  }
}
</script>
